<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>产品资料共享</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/comment_search.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/user_profile.css') }}">
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-light bg-white shadow-sm">
        <div class="container">
            <a class="navbar-brand fw-bold" href="/">产品资料共享</a>
            <div class="navbar-nav ms-auto">
                <div id="userSection">
                    <!-- 未登录状态 -->
                    <div id="notLoggedIn">
                        <button class="btn btn-outline-primary me-2" id="loginButton">
                            <i class="bi bi-box-arrow-in-right me-2"></i>登录
                        </button>
                        <button class="btn btn-primary" id="registerButton">
                            <i class="bi bi-person-plus me-2"></i>注册
                        </button>
                    </div>
                    <!-- 已登录状态 -->
                    <div id="loggedIn" class="d-none">
                        <span class="me-3">欢迎，<a href="javascript:void(0)" id="currentUsername" class="user-link text-decoration-none" style="cursor: pointer;"></a></span>
                        <button class="btn btn-outline-primary me-2 position-relative" id="messagesButton">
                            <i class="bi bi-envelope me-2"></i>私信
                            <span id="unreadBadge" class="badge bg-danger rounded-pill ms-2 d-none">0</span>
                        </button>
                        <button class="btn btn-primary me-2" id="uploadButton">
                            <i class="bi bi-plus-circle me-2"></i>上传内容
                        </button>
                        <button class="btn btn-outline-secondary" id="logoutButton">
                            <i class="bi bi-box-arrow-right me-2"></i>退出
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </nav>

    <!-- 登录模态框 -->
    <div class="modal fade" id="loginModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">用户登录</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <form id="loginForm">
                        <div class="mb-3">
                            <label for="loginUsername" class="form-label">用户名或邮箱</label>
                            <input type="text" class="form-control" id="loginUsername" required>
                        </div>
                        <div class="mb-3">
                            <label for="loginPassword" class="form-label">密码</label>
                            <input type="password" class="form-control" id="loginPassword" required>
                        </div>
                        <div id="loginError" class="alert alert-danger d-none"></div>
                        <button type="submit" class="btn btn-primary w-100">登录</button>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- 注册模态框 -->
    <div class="modal fade" id="registerModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">用户注册</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <form id="registerForm">
                        <div class="mb-3">
                            <label for="registerUsername" class="form-label">用户名</label>
                            <input type="text" class="form-control" id="registerUsername" required>
                        </div>
                        <div class="mb-3">
                            <label for="registerEmail" class="form-label">邮箱</label>
                            <input type="email" class="form-control" id="registerEmail" required>
                        </div>
                        <div class="mb-3">
                            <label for="registerPassword" class="form-label">密码</label>
                            <input type="password" class="form-control" id="registerPassword" required>
                            <div class="form-text">密码至少需要6个字符</div>
                        </div>
                        <div id="registerError" class="alert alert-danger d-none"></div>
                        <button type="submit" class="btn btn-primary w-100">注册</button>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- 主页面 - 搜索界面 -->
    <div id="searchPage" class="search-page">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-lg-8">
                    <div class="text-center mb-5">
                        <h1 class="display-4 fw-bold text-primary mb-3">产品资料共享</h1>
                        <p class="lead text-muted">搜索和共享产品相关的文档、图片和网页资料</p>
                    </div>
                    
                    <!-- 搜索框 -->
                    <div class="search-container mb-5">
                        <!-- 隐藏的假输入框来欺骗浏览器 -->
                        <input type="text" style="position: absolute; left: -9999px; opacity: 0;" tabindex="-1" autocomplete="username">
                        <input type="password" style="position: absolute; left: -9999px; opacity: 0;" tabindex="-1" autocomplete="current-password">
                        
                        <div class="input-group input-group-lg">
                            <input type="search" class="form-control search-input" id="mainSearchInput"
                                   placeholder="输入关键词搜索内容..." autocomplete="new-password" 
                                   data-form-type="search" role="searchbox" spellcheck="false"
                                   name="search_query" data-lpignore="true">
                            <button class="btn btn-primary px-4" type="button" id="mainSearchButton">
                                <i class="bi bi-search"></i>
                            </button>
                        </div>
                    </div>
                    
                    <!-- 搜索结果 -->
                    <div id="mainSearchResults" class="d-none">
                        <div class="d-flex justify-content-between align-items-center mb-3">
                            <h5 class="mb-0">搜索结果</h5>
                            <small class="text-muted" id="searchResultCount"></small>
                        </div>
                        <div id="mainSearchResultsList"></div>
                    </div>
                    
                    <!-- 最近内容 -->
                    <div id="recentContent">
                        <div class="text-center">
                            <h5 class="mb-3">最近添加的内容</h5>
                            <div id="recentContentList">
                                <button id="loadRecentButton" class="btn btn-outline-primary">
                                    <i class="bi bi-clock-history me-2"></i>查看最近内容
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 上传页面 -->
    <div id="uploadPage" class="upload-page d-none">
        <div class="container mt-4">
            <div class="row justify-content-center">
                <div class="col-lg-8">
                    <div class="d-flex justify-content-between align-items-center mb-4">
                        <h2>上传内容</h2>
                        <button class="btn btn-outline-secondary" id="backToSearchButton">
                            <i class="bi bi-arrow-left me-2"></i>返回搜索
                        </button>
                    </div>
                    
                    <div class="card">
                        <div class="card-header">
                            <ul class="nav nav-tabs card-header-tabs" id="inputTabs" role="tablist">
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link active" id="text-tab" data-bs-toggle="tab" 
                                            data-bs-target="#text-input" type="button" role="tab" 
                                            aria-controls="text-input" aria-selected="true">
                                        <i class="bi bi-file-text me-2"></i>文本
                                    </button>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link" id="image-tab" data-bs-toggle="tab" 
                                            data-bs-target="#image-input" type="button" role="tab" 
                                            aria-controls="image-input" aria-selected="false">
                                        <i class="bi bi-image me-2"></i>图片
                                    </button>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link" id="file-tab" data-bs-toggle="tab" 
                                            data-bs-target="#file-input" type="button" role="tab" 
                                            aria-controls="file-input" aria-selected="false">
                                        <i class="bi bi-file-earmark-text me-2"></i>文件
                                    </button>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link" id="url-tab" data-bs-toggle="tab" 
                                            data-bs-target="#url-input" type="button" role="tab" 
                                            aria-controls="url-input" aria-selected="false">
                                        <i class="bi bi-link-45deg me-2"></i>网页链接
                                    </button>
                                </li>
                            </ul>
                        </div>
                        <div class="card-body">
                            <div class="tab-content" id="inputTabContent">
                                <!-- 文本输入 -->
                                <div class="tab-pane fade show active" id="text-input" role="tabpanel" aria-labelledby="text-tab">
                                    <form id="textForm">
                                        <div class="mb-3">
                                            <label for="textContent" class="form-label">输入文本内容</label>
                                            <textarea class="form-control" id="textContent" rows="10" 
                                                      placeholder="在此输入您的文本内容..." required></textarea>
                                        </div>
                                        <button type="submit" class="btn btn-primary">
                                            <i class="bi bi-upload me-2"></i>提交
                                        </button>
                                    </form>
                                </div>
                                
                                <!-- 图片输入 -->
                                <div class="tab-pane fade" id="image-input" role="tabpanel" aria-labelledby="image-tab">
                                    <div class="mb-3">
                                        <label class="form-label">粘贴截图</label>
                                        <div class="form-text">使用 Ctrl+V / Cmd+V 将剪贴板中的图片粘贴后将在下方显示预览</div>
                                        <div class="mt-3">
                                            <img id="imagePreview" class="img-fluid d-none" alt="图片预览">
                                        </div>
                                    </div>
                                    <button type="button" class="btn btn-primary" id="uploadPastedImageBtn" disabled>
                                        <i class="bi bi-cloud-upload me-2"></i>上传截图
                                    </button>
                                </div>
                                
                                <!-- 文件输入 -->
                                <div class="tab-pane fade" id="file-input" role="tabpanel" aria-labelledby="file-tab">
                                    <form id="fileForm">
                                        <div class="mb-3">
                                            <label for="uploadFile" class="form-label">选择文件</label>
                                            <input class="form-control" type="file" id="uploadFile"
                                                   accept=".md,.markdown,.txt,.jpg,.jpeg,.png,.gif,.bmp,.webp,.pdf" required>
                                            <div class="form-text">
                                                支持的格式：
                                                <br>• Markdown文件 (.md, .markdown) - 将自动渲染为HTML
                                                <br>• 文本文件 (.txt) - 纯文本内容
                                                <br>• 图片文件 (JPG, PNG, GIF, BMP, WebP) - 自动提取文字
                                                <br>• PDF文档 (.pdf) - 自动提取文本和目录
                                            </div>
                                            <div class="mt-3">
                                                <div id="filePreview" class="d-none">
                                                    <div class="alert alert-info">
                                                        <i class="bi bi-file-earmark me-2"></i>
                                                        <span id="filePreviewName"></span>
                                                        <small class="text-muted ms-2" id="filePreviewSize"></small>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <button type="submit" class="btn btn-primary">
                                            <i class="bi bi-upload me-2"></i>提交
                                        </button>
                                    </form>
                                </div>
                                
                                <!-- URL输入 -->
                                <div class="tab-pane fade" id="url-input" role="tabpanel" aria-labelledby="url-tab">
                                    <form id="urlForm">
                                        <div class="mb-3">
                                            <label for="urlInput" class="form-label">输入网页链接</label>
                                            <input type="url" class="form-control" id="urlInput" 
                                                   placeholder="https://example.com" required>
                                            <div class="form-text">系统将自动抓取网页内容并提取关键信息</div>
                                        </div>
                                        <button type="submit" class="btn btn-primary">
                                            <i class="bi bi-upload me-2"></i>提交
                                        </button>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 处理结果 -->
                    <div id="uploadResultContainer" class="mt-4 d-none">
                        <div class="card">
                            <div class="card-header">
                                <h5 class="mb-0">处理结果</h5>
                            </div>
                            <div class="card-body">
                                <div id="uploadResult"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 评论模态框 -->
    <div class="modal fade" id="commentsModal" tabindex="-1" aria-labelledby="commentsModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="commentsModalLabel">评论</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div id="commentsContainer"></div>
                    
                    <div id="addCommentSection" class="mt-4">
                        <h5>发表评论</h5>
                        <form id="commentForm">
                            <div class="mb-3">
                                <textarea id="commentText" class="form-control" rows="3" placeholder="输入您的评论..."></textarea>
                            </div>
                            <div class="d-flex justify-content-between">
                                <button type="button" id="cancelReplyBtn" class="btn btn-outline-secondary d-none">
                                    <i class="bi bi-x-circle me-1"></i>取消回复
                                </button>
                                <button type="submit" class="btn btn-primary">
                                    <i class="bi bi-send me-1"></i>提交评论
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 内容查看模态框 -->
    <div class="modal fade" id="contentViewModal" tabindex="-1" aria-labelledby="contentViewModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="contentViewModalLabel">内容详情</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div id="contentViewContainer">
                        <!-- 内容将在这里动态加载 -->
                    </div>
                </div>
                <div class="modal-footer"></div>
            </div>
        </div>
    </div>
    
    <!-- 私信列表模态框 -->
    <div class="modal fade" id="messagesModal" tabindex="-1" aria-labelledby="messagesModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="messagesModalLabel">私信</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <ul class="nav nav-tabs mb-3" id="messagesTabs" role="tablist">
                        <li class="nav-item" role="presentation">
                            <button class="nav-link active" id="received-tab" data-bs-toggle="tab" 
                                    data-bs-target="#received-messages" type="button" role="tab" 
                                    aria-controls="received-messages" aria-selected="true">
                                收到的私信
                            </button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="sent-tab" data-bs-toggle="tab" 
                                    data-bs-target="#sent-messages" type="button" role="tab" 
                                    aria-controls="sent-messages" aria-selected="false">
                                发送的私信
                            </button>
                        </li>
                    </ul>
                    <div class="tab-content" id="messagesTabContent">
                        <div class="tab-pane fade show active" id="received-messages" role="tabpanel" aria-labelledby="received-tab">
                            <div id="receivedMessagesList">
                                <div class="text-center p-4">
                                    <div class="spinner-border text-primary" role="status">
                                        <span class="visually-hidden">加载中...</span>
                                    </div>
                                    <p class="mt-2">正在加载私信...</p>
                                </div>
                            </div>
                        </div>
                        <div class="tab-pane fade" id="sent-messages" role="tabpanel" aria-labelledby="sent-tab">
                            <div id="sentMessagesList">
                                <div class="text-center p-4">
                                    <div class="spinner-border text-primary" role="status">
                                        <span class="visually-hidden">加载中...</span>
                                    </div>
                                    <p class="mt-2">正在加载私信...</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 发送私信模态框 -->
    <div class="modal fade" id="sendMessageModal" tabindex="-1" aria-labelledby="sendMessageModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="sendMessageModalLabel">发送私信</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="sendMessageForm">
                        <div class="mb-3">
                            <label for="messageRecipient" class="form-label">收件人</label>
                            <input type="text" class="form-control" id="messageRecipient" readonly>
                        </div>
                        <div class="mb-3">
                            <label for="messageSubject" class="form-label">主题</label>
                            <input type="text" class="form-control" id="messageSubject" placeholder="请输入消息主题" required>
                        </div>
                        <div class="mb-3">
                            <label for="messageContent" class="form-label">消息内容</label>
                            <textarea class="form-control" id="messageContent" rows="5" placeholder="请输入您要发送的消息内容..." required></textarea>
                        </div>
                        <div class="alert alert-danger d-none" id="messageError"></div>
                        <div class="alert alert-success d-none" id="messageSuccess"></div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" onclick="sendPrivateMessage()">
                        <i class="bi bi-send me-1"></i>发送
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- 用户信息模态框 -->
    <div class="modal fade" id="userProfileModal" tabindex="-1" aria-labelledby="userProfileModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="userProfileModalLabel">用户信息</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div id="userProfileContainer">
                        <!-- 用户信息将在这里动态加载 -->
                        <div class="text-center p-4">
                            <div class="spinner-border text-primary" role="status">
                                <span class="visually-hidden">加载中...</span>
                            </div>
                            <p class="mt-2">正在加载用户信息...</p>
                        </div>
                    </div>
                    
                    <!-- 修改邮箱表单 -->
                    <div id="updateEmailForm" class="d-none mt-4">
                        <h5 class="border-bottom pb-2">修改邮箱</h5>
                        <div class="mb-3">
                            <label for="newEmail" class="form-label">新邮箱地址</label>
                            <input type="email" class="form-control" id="newEmail" required>
                        </div>
                        <div class="alert alert-danger d-none" id="emailUpdateError"></div>
                        <div class="d-flex justify-content-end">
                            <button type="button" class="btn btn-secondary me-2" onclick="toggleEmailForm(false)">取消</button>
                            <button type="button" class="btn btn-primary" onclick="updateEmail()">保存</button>
                        </div>
                    </div>
                    
                    <!-- 修改密码表单 -->
                    <div id="updatePasswordForm" class="d-none mt-4">
                        <h5 class="border-bottom pb-2">修改密码</h5>
                        <div class="mb-3">
                            <label for="currentPassword" class="form-label">当前密码</label>
                            <input type="password" class="form-control" id="currentPassword" required>
                        </div>
                        <div class="mb-3">
                            <label for="newPassword" class="form-label">新密码</label>
                            <input type="password" class="form-control" id="newPassword" required>
                            <div class="form-text">密码至少需要6个字符</div>
                        </div>
                        <div class="mb-3">
                            <label for="confirmPassword" class="form-label">确认新密码</label>
                            <input type="password" class="form-control" id="confirmPassword" required>
                        </div>
                        <div class="alert alert-danger d-none" id="passwordUpdateError"></div>
                        <div class="d-flex justify-content-end">
                            <button type="button" class="btn btn-secondary me-2" onclick="togglePasswordForm(false)">取消</button>
                            <button type="button" class="btn btn-primary" onclick="updatePassword()">保存</button>
                        </div>
                    </div>
                </div>
                <div class="modal-footer" id="userProfileFooter">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
    <script src="{{ url_for('static', filename='js/user.js') }}"></script>
    <script src="{{ url_for('static', filename='js/utils.js') }}"></script>
    <script src="{{ url_for('static', filename='js/comment.js') }}"></script>
    <script src="{{ url_for('static', filename='js/keyword.js') }}"></script>
    <script src="{{ url_for('static', filename='js/search.js') }}"></script>    
    <script src="{{ url_for('static', filename='js/main.js') }}"></script>
    <script src="{{ url_for('static', filename='js/upload.js') }}"></script>
    <script src="{{ url_for('static', filename='js/annotations.js') }}"></script>
</body>
</html>